<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-14 15:08:24
 * @LastEditors: 侯瑜
 * @LastEditTime: 2022-01-10 19:47:15
-->
<template>
  <!--1. 容器 -->
  <div ref="Buttom1_container" style="height: 95%"></div>
</template>

<script>

import { Pie } from '@antv/g2plot';

export default{
  data(){
    return{
      dataArr:[
                { type: 'IOS', value: 40 },
                { type: 'Android', value: 28 },
                { type: 'HarmonyOS', value: 32 },
               ]
    }
  },
  created(){

  },
  mounted(){
    this.initChart()
  },
  methods:{
    initChart(){

      const piePlot = new Pie(this.$refs.Buttom1_container, {
            data:this.dataArr,
            angleField: 'value',
            colorField: 'type',
            radius: 1,
            innerRadius: 0.6,
            label: {
            type: 'inner',
            offset: '-50%',
            content: '{value}',
            style: {
            textAlign: 'center',
            fontSize: 14,
    },
  },
  interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
  statistic: {
    title: false,
    content: {
      style: {
        whiteSpace: 'pre-wrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
      },
      content: 'AntV\nG2Plot',
    },
  },
});

piePlot.render();
    }
  }

}
</script>
<style scoped>

</style>